<script type="text/javascript">        
// create an array that holds all the selected finishes
<? 
$a=1; $fin_str = ''; 
foreach ($product_finishes as $prod_fin){
    $fin_str .= "'".$prod_fin."'";
    if ($a<count($product_finishes)) $fin_str .= ',';
    $a++;
} 
?>
var selected_finishes = new Array(<?=$fin_str?>);       

function Load_Finishes_List(){

		loading_queue++;
        $('#finishes_container').html("Loading finishes...");
        $.post("<?=site_url("/admin/products/get_finishes_list")?>", {},
            function(data){
                $('#finishes_container').html(data);
                Check_Finishes();
				  loading_queue--;
            }, "html"
        );
        
}

//receives an array of selected finishes then loops through the finishes and checks the selected ones
function Check_Finishes(){

    for (i=0;i<selected_finishes.length;i++)
    {
         $('#finishes_container').find('input:checkbox[value='+selected_finishes[i]+']').attr('checked', true);
    } 
    $.each($('#finishes_container input:checkbox'), function(){SetCheckboxClass(this)});

}       

$(document).ready(function(){
                               
    Load_Finishes_List();   

    // create new finishe
    $("#create_new_finish").click(function(){
        var name = $.trim($('#new_finish_name').val());
        
        $.post("<?=site_url("/admin/finishes/create")?>", 
            { name: name },
            function(data){
                if(data.success==true){
                    var html_str = data.response;
                    selected_finishes.push(data.item.id);
                    Load_Finishes_List();
                } else {
                    var html_str = data.response;
                }
                $('#new_finish_response').html(html_str).hide().fadeIn();

            }, "json"
        );                                    
        return false;
    }); 
    //disable form submition when pressing enter on text field
    $("#new_finish_name").bind("keypress", function(e,a) {
        if (e.keyCode == 13) {
            $("#create_new_finish").click();
            return false;
        }
    });

    // when a checkbox is clicked, the selected_apps array is updated
    $('#finishes_container input:checkbox').live('click', function(){

        v = $(this).val();
        if ($(this).is(':checked')) { 
            selected_finishes.push(v);
        } else {            
            for (var i=0; i<selected_finishes.length; i++) {
                if (selected_finishes[i] == v) selected_finishes.splice(i, 1);
            }
        }
        SetCheckboxClass(this);   
        
    });  

});        

</script>


<div class="live_search_msg"></div>

<div id="finishes_container" class="content_block" style="width:100%; overflow:auto">
</div>


<div class="content_block">  
    <input type="text" id="new_finish_name" maxlength="200" style="display:inline; width:200px" />
    <a id="create_new_finish" class="button" href="#">ADD NEW</a>
    <div id="new_finish_response"></div>
</div>  
